<template>
  <view class="container">
    <view class="header">
      <text class="title">弹窗传值示例</text>
    </view>
    
    <view class="content">
      <!-- 方式1：通过Props传值 -->
      <view class="section">
        <text class="section-title">方式1：通过Props传值</text>
        <button class="btn primary" @click="openWithProps">
          打开弹窗（Props传值）
        </button>
      </view>
      
      <!-- 方式2：通过ref传值 -->
      <view class="section">
        <text class="section-title">方式2：通过ref传值</text>
        <button class="btn success" @click="openWithRef">
          打开弹窗（Ref传值）
        </button>
      </view>
      
      <!-- 方式3：动态传值 -->
      <view class="section">
        <text class="section-title">方式3：动态传值</text>
        <input 
          class="input" 
          v-model="dynamicCardNumber" 
          placeholder="输入默认卡号"
        />
        <button class="btn warning" @click="openWithDynamic">
          打开弹窗（动态传值）
        </button>
      </view>
      
      <!-- 结果显示 -->
      <view class="result-section" v-if="submitResult">
        <text class="result-title">提交结果：</text>
        <view class="result-content">
          <text>卡号：{{ submitResult.cardNumber }}</text>
          <text>订单号：{{ submitResult.orderInfo?.orderNo }}</text>
          <text>用户：{{ submitResult.initialData?.userName }}</text>
        </view>
      </view>
    </view>
    
    <!-- 确认收货弹窗组件 -->
    <ConfirmReceiptModal 
      ref="modalRef"
      v-model:visible="modalVisible"
      :order-info="orderInfo"
      :default-card-number="defaultCardNumber"
      :initial-data="initialData"
      @submit="handleSubmit"
      @close="handleClose"
    />
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import ConfirmReceiptModal from './ConfirmReceiptModal.vue'

// 响应式数据
const modalVisible = ref(false)
const modalRef = ref(null)
const submitResult = ref(null)

// 传递给子组件的数据
const orderInfo = ref({})
const defaultCardNumber = ref('')
const initialData = ref({})
const dynamicCardNumber = ref('')

// 模拟订单数据
const mockOrderData = {
  orderNo: 'ORD' + Date.now(),
  orderDate: new Date().toLocaleDateString(),
  totalAmount: '299.00',
  status: '待收货'
}

// 模拟用户数据
const mockUserData = {
  userId: 'user123',
  userName: '张三',
  userPhone: '13800138000',
  timestamp: Date.now()
}

// 方式1：通过Props传值
const openWithProps = () => {
  orderInfo.value = { ...mockOrderData, orderNo: 'ORD' + Date.now() }
  defaultCardNumber.value = '1234567890'
  initialData.value = { ...mockUserData, timestamp: Date.now() }
  modalVisible.value = true
}

// 方式2：通过ref传值
const openWithRef = () => {
  // 先打开弹窗
  modalVisible.value = true
  
  // 然后通过ref设置数据
  setTimeout(() => {
    if (modalRef.value) {
      // 通过ref直接操作子组件数据
      orderInfo.value = { ...mockOrderData, orderNo: 'REF' + Date.now() }
      defaultCardNumber.value = '9876543210'
      initialData.value = { ...mockUserData, userName: '李四', timestamp: Date.now() }
    }
  }, 100)
}

// 方式3：动态传值
const openWithDynamic = () => {
  orderInfo.value = { 
    ...mockOrderData, 
    orderNo: 'DYN' + Date.now(),
    note: '动态传值示例'
  }
  defaultCardNumber.value = dynamicCardNumber.value || '动态卡号'
  initialData.value = { 
    ...mockUserData, 
    userName: '王五',
    dynamicData: true,
    timestamp: Date.now()
  }
  modalVisible.value = true
}

// 处理提交
const handleSubmit = (data) => {
  console.log('提交数据:', data)
  submitResult.value = data
  
  uni.showToast({
    title: '确认收货成功',
    icon: 'success'
  })
}

// 处理关闭
const handleClose = () => {
  console.log('弹窗已关闭')
  // 清空数据
  orderInfo.value = {}
  defaultCardNumber.value = ''
  initialData.value = {}
}
</script>

<style scoped>
.container {
  padding: 40rpx;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.header {
  text-align: center;
  margin-bottom: 40rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.content {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 40rpx;
}

.section {
  margin-bottom: 40rpx;
  padding: 20rpx;
  border: 1rpx solid #eee;
  border-radius: 8rpx;
}

.section-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}

.btn {
  width: 100%;
  height: 80rpx;
  border: none;
  border-radius: 8rpx;
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.btn.primary {
  background-color: #007aff;
  color: #fff;
}

.btn.success {
  background-color: #28a745;
  color: #fff;
}

.btn.warning {
  background-color: #ffc107;
  color: #333;
}

.btn:active {
  opacity: 0.8;
}

.input {
  width: 100%;
  height: 80rpx;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  margin-bottom: 20rpx;
  background-color: #fff;
}

.result-section {
  margin-top: 40rpx;
  padding: 20rpx;
  background-color: #f8f8f8;
  border-radius: 8rpx;
}

.result-title {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 20rpx;
  display: block;
}

.result-content {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.result-content text {
  font-size: 26rpx;
  color: #333;
}
</style> 